<template>
  <div>
    <div class="header-ser">
      <div class="user-ser">
        <div class="hdr-l-ser">
          <img src="@/assets/yxlogo.png" class="h-l-sp1" />
        </div>
        <div class="hdr-r-ser">
          <h4 class="h-r-t">宇喜首页</h4>
          <img src="@/assets/touxiang.png" class="h-r-sp1" />
        </div>
      </div>
      <div class="nav-ser">
        <h3 class="n-s-t">宇喜服务市场</h3>
        <div class="navs">
          <img src="@/assets/NEW.png" class="n-sp1" />
          <h5>研发创新</h5>
          <h5>行业</h5>
          <h5>服务</h5>
          <h5 class="last">体验馆</h5>
        </div>
        <div class="search">
          <img src="@/assets/sousuo.png" class="sea-sp1" />
          <input type="text" class="s-s-i" placeholder="输入案例/解决方案" />
        </div>
      </div>
    </div>
    <div class="row-a1-ser">
      <div class="a1-l">
        <div class="bok1">
          <h3 class="b1-tit">研发创新></h3>
          <h5 class="b1-txt">宇喜工具集</h5>
          <h5 class="b1-txt">编码器</h5>
          <h5 class="b1-txt">宇喜pdm工具集</h5>
        </div>
        <div class="bok1">
          <h3 class="b1-tit">行业></h3>
          <h5 class="b1-txt">教育/培训</h5>
          <h5 class="b1-txt">制造业</h5>
          <h5 class="b1-txt">软件/IT服务</h5>
          <h5 class="b1-txt">医药</h5>
        </div>
        <div class="bok1">
          <h3 class="b1-tit">服务></h3>
          <h5 class="b1-txt">解决方案</h5>
          <h5 class="b1-txt">云服务3DExperience</h5>
        </div>
        <div class="bok1">
          <h3 class="b1-tit">体验馆></h3>
          <h5 class="b1-txt">三维可视化交互</h5>
          <h5 class="b1-txt">产品试用</h5>
        </div>
      </div>
      <div class="a1-r">
        <img src="@/assets/gjj.png" class="a1r-sp1" />
        <img src="@/assets/dq3d.png" class="a1r-sp1" />
        <img src="@/assets/dq3d2.png" class="a1r-sp1" />
      </div>
      <div class="block">
        <el-carousel height="597px">
          <el-carousel-item v-for="item in 4" :key="item">
            <img src="@/assets/bg.png" class="a1-sp1" />
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <div class="row-a2-ser">
      <div class="a2-wp">
        <h3 class="a2-tit">体验专区</h3>
        <ul class="a2-ul1">
          <li class="on">三维可视化交互</li>
          <li>SolidWorks产品1</li>
          <li>SolidWorks产品2</li>
          <li>企业应用</li>
        </ul>
        <div class="a2-det-ser">
          <div class="a2d-l">
            <h4 class="a2d-tit">三维可视化交互</h4>
            <p class="a2d-p">实现三维立体世界的自由拖拽</p>
            <p class="a2d-p">与对应数据进行互动，融合数据，结合场景</p>
            <p class="a2d-p">
              帮助用户由宏观到微观更快地了解数据，做出更具时效性的决策
            </p>
            <span class="a2d-sp">免费体验</span>
          </div>
          <div class="a2d-r">
            <h4 class="a2d-tit">三维可视化交互</h4>
            <p class="a2d-p">实现三维立体世界的自由拖拽</p>
            <p class="a2d-p">与对应数据进行互动，融合数据，结合场景</p>
            <p class="a2d-p">
              帮助用户由宏观到微观更快地了解数据，做出更具时效性的决策
            </p>
            <span class="a2d-sp">免费体验</span>
          </div>
        </div>
        <div class="cs">
          <span class="cs-sp">?</span
          ><span class="cs-sp2">没有我想要的，咨询客服</span>
        </div>
      </div>
    </div>
    <div class="row-a3-ser">
      <div class="a3-wp">
        <h3>精英团队</h3>
        <div class="character" v-for="item in 8" :key="item">
          <div class="char-txt">
            <p class="ch-p">林允儿</p>
            1981年9月16日出生于山东青岛，华语影视女演员、制片人、歌手，毕业于上海师范大学。。
          </div>
        </div>
      </div>
    </div>
    <div class="row-a4-ser">
      <div class="a4-wp">
        <h3 class="a4-tit">客户成功案例</h3>
        <img src="@/assets/khal.png" class="a4-pic" />
        <div class="a4-txt">
          <h4 class="a4-t2">电气设计</h4>
          <p class="a4-p1">
            SOLIDWORKS Electrical
            机电一体化解决方案将2D电气设计数据与3D电气设计数据直接集成在SOLIDWORKS机械产品设计平台上，完成原理图设计、3D空间布置及3D自动布线，并且电气及机械设计数据实时同步更新。电气设计数据中零部件信息及项目图纸与SOLIDWORKS
            3D机械产品设计数据可以通过SOLIDWORKS
            PDM进行管理，使电气和机械之间的设计更加高效，从而实现机电一体化设计。
          </p>
          <p class="a4-p2">
            相关产品：
            <span class="a4-sp1">Electrical Camera 6</span>
          </p>
          <h5 class="a4-btn1">阅读案例</h5>
          <h5 class="a4-btn2">咨询购买同款</h5>
        </div>
        <div class="enterprise">
          <div class="ent-pic" v-for="item in 6" :key="item">
            <img src="@/assets/dzjg.png" />
          </div>
        </div>
      </div>
    </div>
    <div class="row-a5-ser"></div>
  </div>
</template>

<script>
export default {
  // 定义属性
  data() {
    return {}
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {}
}
</script>

<style lang='less'>
.header-ser {
  max-width: 1920px;
  height: 144px;
  .user-ser {
    height: 64px;
    .hdr-l-ser {
      height: 64px;
      float: left;
      .h-l-sp1 {
        width: 109px;
        margin-top: 4px;
        margin-left: 71px;
      }
    }
    .hdr-r-ser {
      float: right;
      .h-r-t {
        margin-top: 22px;
        margin-right: 20px;
        padding-right: 20px;
        float: left;
        font-size: 14px;
        font-weight: normal;
        font-stretch: normal;
        line-height: 20x;
        letter-spacing: 0px;
        color: #555555;
        border-right: 1px solid #cccccc;
      }
      .h-r-sp1 {
        width: 32px;
        float: right;
        margin-right: 40px;
        margin-top: 16px;
      }
    }
  }
  .nav-ser {
    width: 100%;
    height: 80px;
    background-color: #da251d;
    position: relative;
    .n-s-t {
      margin-left: 370px;
      width: 200px;
      float: left;
      font-size: 32px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 80px;
      letter-spacing: 0px;
      color: #ffffff;
    }
    .search {
      float: right;
      position: relative;
      .s-s-i {
        width: 340px;
        height: 32px;
        border: none;
        outline: none;
        margin-top: 24px;
        margin-right: 40px;
        padding-left: 10px;
        background-color: transparent;
        border-bottom: 1px solid #fff;
        color: #fff;
      }
      ::placeholder {
        font-size: 14px;
        color: #ffffff;
        opacity: 0.6;
      }
      .sea-sp1 {
        position: absolute;
        top: 32px;
        left: 320px;
      }
    }
    .navs {
      position: absolute;
      left: 50%;
      top: 50px;
      width: 395px;
      transform: translate(-50%, -80%);
      h5 {
        float: left;
        padding-right: 64px;
        font-size: 18px;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #ffffff;
      }
      .last {
        padding: 0;
      }
      .n-sp1 {
        width: 38px;
        position: absolute;
        top: -12px;
        left: 66px;
      }
    }
  }
}
.row-a1-ser {
  overflow: hidden;
  padding-top: 12px;
  width: 1920px;
  height: 632px;
  background-color: #f5f5f5;
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
  }
  .block {
    width: 726px;
    height: 597px;
    .el-carousel__button {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      border: 1px solid #ffffff;
    }
  }
  .a1-l {
    float: left;
    box-sizing: border-box;
    margin-left: 370px;
    padding-top: 20px;
    padding-left: 15px;
    width: 214px;
    height: 597px;
    background-color: #ffffff;
    border: solid 1px #dddddd;
    .bok1 {
      padding-right: 30px;
      margin-bottom: 30px;
      overflow: hidden;
      .b1-tit {
        font-size: 16px;
        margin-bottom: 14px;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #da251d;
      }
      .b1-txt {
        float: left;
        padding-bottom: 2px;
        padding-right: 20px;
        font-size: 14px;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #666666;
      }
    }
  }
  .a1-r {
    float: right;
    padding-right: 345px;
    width: 240px;
    height: 597px;
    .a1r-sp1 {
      margin-bottom: 6.5px;
    }
  }
}
.row-a2-ser {
  width: 1920px;
  height: 510px;
  background-color: #fff;
  .a2-wp {
    width: 1200px;
    margin-left: 370px;
    .a2-tit {
      margin-top: 38px;
      font-size: 36px;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0px;
      color: #222222;
    }
    .a2-ul1 {
      margin-top: 6px;
      list-style: none;
      width: 1200px;
      height: 40px;
      overflow: hidden;
      border-bottom: 1px solid #e5e5e5;
      li {
        float: left;
        line-height: 39.5px;
        margin-right: 95px;
        font-size: 16px;
      }
      li:hover {
        color: #da251d;
        border-bottom: 1px solid #da251d;
      }
      .on {
        color: #da251d;
        border-bottom: 1px solid #da251d;
      }
    }
    .a2-det-ser {
      margin-top: 20px;
      overflow: hidden;
    }
    .a2d-tit {
      margin-top: 38px;
      margin-bottom: 20px;
      font-size: 18px;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0px;
      color: #222222;
    }
    .a2d-p {
      margin-bottom: 12px;
      font-size: 14px;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0px;
      color: #999999;
    }
    .a2d-sp {
      text-align: center;
      margin-left: 0;
      margin-top: 30px;
      display: block;
      font-size: 14px;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0px;
      color: #ffffff;
      width: 90px;
      line-height: 32px;
      height: 32px;
      background-color: #da251d;
    }
    .a2d-l {
      box-sizing: border-box;
      float: left;
      padding-left: 24px;
      width: 590px;
      height: 250px;
      background-color: #ffffff;
      border: solid 1px #dddddd;
    }
    .a2d-r {
      box-sizing: border-box;
      float: right;
      padding-left: 24px;
      width: 590px;
      height: 250px;
      background-color: #ffffff;
      border: solid 1px #dddddd;
    }
    .cs {
      width: 210px;
      margin-top: 30px;
      .cs-sp {
        margin-right: 10px;
        text-align: center;
        float: left;
        display: block;
        border-radius: 50%;
        width: 24px;
        height: 24px;
        background-color: #da251d;
        line-height: 24px;
        font-size: 14px;
        color: #fff;
      }
      .cs-sp2 {
        font-size: 14px;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #666666;
      }
    }
  }
}
.row-a3-ser {
  width: 1920px;
  height: 924px;
  background-color: #f2f2f2;
  .a3-wp {
    width: 1200px;
    margin-left: 380px;
    h3 {
      padding-top: 40px;
      padding-bottom: 30px;
      font-size: 36px;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0px;
      color: #333333;
    }
    .character {
      position: relative;
      float: left;
      margin-right: 20px;
      margin-bottom: 40px;
      width: 280px;
      height: 360px;
      background-image: url('~@/assets/lin.png');
      background-repeat: no-repeat;
    }
    .char-txt {
      padding: 20px;
      box-sizing: border-box;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      text-align: center;
      width: 240px;
      height: 121px;
      background-color: #ffffff;
      box-shadow: 0px 1px 27px 0px rgba(0, 6, 32, 0.1);
      font-family: AdobeHeitiStd-Regular;
      font-size: 14px;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0px;
      color: #666666;
      .ch-p {
        font-size: 16px;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #333333;
      }
    }
  }
}
.row-a4-ser {
  width: 1920px;
  height: 700px;
  background-image: url('~@/assets/khbg.png');
  background-repeat: no-repeat;
  .a4-wp {
    width: 1700px;
    margin-left: 370px;
    .a4-tit {
      padding-top: 40px;
      font-size: 36px;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0px;
      color: #ffffff;
    }
    .a4-pic {
      float: left;
      margin-top: 58px;
      margin-left: 18px;
    }
    .a4-txt {
      float: left;
      margin-top: 35px;
      padding-left: 30px;
      width: 460px;
      height: 420px;
      background-color: #ffffff;
      .a4-t2 {
        font-size: 24px;
        padding-top: 45px;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #333333;
      }
      .a4-p1 {
        width: 398px;
        margin: 0;
        padding-top: 15px;
        font-size: 14px;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #666666;
      }
      .a4-p2 {
        padding-top: 56px;
        font-size: 14px;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #666666;
        .a4-sp1 {
          color: #da251d;
        }
      }
      .a4-btn1 {
        float: left;
        margin-top: 23px;
        margin-right: 10px;
        text-align: center;
        font-size: 14px;
        font-weight: normal;
        font-stretch: normal;
        line-height: 30px;
        color: #333333;
        width: 96px;
        height: 30px;
        background-color: #ffffff;
        border: solid 1px #cccccc;
      }
      .a4-btn2 {
        float: left;
        margin-top: 23px;
        text-align: center;
        width: 124px;
        height: 32px;
        background-color: #da251d;
        font-size: 14px;
        font-weight: normal;
        font-stretch: normal;
        line-height: 32px;
        letter-spacing: 0px;
        color: #ffffff;
      }
    }
    .enterprise {
      float: left;
      width: 1200px;
      margin-left: 20px;
      .ent-pic {
        margin-top: 40px;
        text-align: center;
        float: left;
        margin-right: 16.5px;
        width: 180px;
        height: 60px;
        background-color: #ffffff;
        img {
          padding-top: 12px;
        }
      }
    }
  }
}
.row-a5-ser{
  width: 1920px;
	height: 760px;
	background-color: #f9f9f9;
}
</style>
